<template>
  <div class="employees-container">
    ==={{ name1 }}
    <!-- <el-card style="margin: 10px">
      <div style="display: flex; justify-content: space-between">
        <div class="left">left</div>
        <div class="right">right</div>
      </div>
    </el-card> -->
    <toolPage>
      <!-- <h1 slot="left">我是left</h1> -->
      <!-- <template #left>
        <h1>你是left</h1>
      </template> -->
      <template #right>
        <el-button type="primary" @click="handleDownload" v-arrow="'work567'"
          >导出</el-button
        >
        <el-button
          type="primary"
          @click="$router.push({ path: '/employees/import' })"
          >导入</el-button
        >
        <el-button type="primary" @click="add">+ 新增员工</el-button>
      </template>
    </toolPage>
    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="150">
          <template slot-scope="scoped">{{
            (page - 1) * size + 1 + scoped.$index
          }}</template>
        </el-table-column>
        <el-table-column sortable prop="username" label="姓名" width="120" />
        <el-table-column sortable prop="mobile" label="手机号" width="120" />
        <el-table-column sortable prop="workNumber" label="工号" width="120" />
        <el-table-column
          sortable
          prop="formOfEmployment"
          label="聘用形式"
          width="120"
        />
        <el-table-column
          sortable
          prop="departmentName"
          label="部门"
          width="120"
        />
        <el-table-column sortable label="入职时间" width="120">
          <template slot-scope="{ row }">{{
            row.timeOfEntry | forMat('YYYY-MM-DD')
          }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <!-- <el-button
              type="text"
              size="small"
              @click="$router.push('/employees/detail' + scope.row.id)"
              >查看</el-button
            > -->
            <!-- <el-button
              type="text"
              size="small"
              @click="$router.push('/employees/detail?id=' + scope.row.id)"
              >查看</el-button
            > -->
            <!-- <el-button
              type="text"
              size="small"
              @click="
                $router.push({
                  path: '/employees/detail',
                  query: {
                    id: scope.row.id,
                  },
                })
              "
              >查看</el-button
            > -->
            <!-- <el-button
              type="text"
              size="small"
              @click="
                $router.push({
                  name: 'detail',
                  params: {
                    id: scope.row.id,
                  },
                })
              "
              >查看</el-button
            > -->

            <el-button
              type="text"
              size="small"
              @click="
                $router.push({
                  name: 'detail',
                  query: {
                    id: scope.row.id,
                  },
                })
              "
              >查看</el-button
            >

            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small" @click="roleHandle(scope.row)"
              >角色</el-button
            >
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="size"
        layout="total,prev, pager, next"
        :total="total"
      />
      <!-- 对话框 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisibleEmp"
        width="50%"
        @close="closeHandle"
      >
        <empDialog v-if="dialogVisibleEmp" @success="success" />
      </el-dialog>
      <!-- 分配角色 对话框 -->
      <el-dialog
        title="分配角色"
        :visible.sync="dialogVisibleRole"
        width="50%"
        @close="closeHandleRole"
      >
        <assignRole
          v-if="dialogVisibleRole"
          :user-id="userId"
          :role-ids="userInfo.roleIds"
          @success="dialogVisibleRole = false"
        />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getUserDetailById } from '@/api/user.js'
import { getEmployeeList } from '@/api/employees.js'
import empDialog from './empDialog.vue'
import assignRole from './assignRole.vue'
export default {
  components: {
    empDialog,
    assignRole
  },
  data() {
    return {
      name: 'rose',
      tableData: [],
      page: 1,
      size: 10,
      total: 1,
      dialogVisibleEmp: false,
      tHeader: [],
      // 分配角色
      dialogVisibleRole: false,
      userInfo: {},
      userId: ''
    }
  },
  created() {
    this.getEmp()
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    async getEmp() {
      const res = await getEmployeeList(this.page, this.size)
      console.log(res, 8)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getEmp()
    },
    add() {
      // 步骤分析
      // 1-显示对话框
      // 2-对话框布局结构展示
      // 3-展示部门数据
      // 4-表单校验+兜底校验
      // 5-点击确认按钮
      //  5-1获取表单数据
      //  5-2封装api接口函数
      //  5-3调用接口函数
      //  5-4成功后:关闭对话框+ 刷新页面 + 清空表单数据
      this.dialogVisibleEmp = true
    },
    closeHandle() {
      // 关闭对话框触发函数
    },
    success() {
      this.dialogVisibleEmp = false
      this.getEmp()
    },
    // 文件导出
    async handleDownload() {
      // 获取所有的数据并导出
      const res = await getEmployeeList(this.page, this.total)
      import('@/vendor/Export2Excel').then((excel) => {
        // const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        // const list = this.tableData // 一维数组
        const list = res.data.rows
        const data = this.formatJson(list) // 二维数组
        console.log(`data`, data)
        excel.export_json_to_excel({
          multiHeader: [
            ['a', 'b', 'a', 'b', 'a', 'b', 'a', 'b', '', 'b'],
            ['a', 'b', 'a', 'b', 'a', 'b', 'a', 'b', 'a', 'b']
          ], // 多表头,要求是一个二维数组
          merges: ['A1:B1'], // 合并
          header: this.tHeader, // 导出来的表头
          data, // 导出来的数据
          filename: this.filename, // 文件名
          autoWidth: this.autoWidth, // 宽度自适应
          bookType: this.bookType // 导出文件后缀类型
        })
      })
    },
    formatJson(list) {
      // 目标:将list数组中的每一项 [对象]=>转换成=>变成每一个数组,值就是数组的每一项
      console.log(`list`, list)
      // 数据自定义====获取20个数据中的10个数据
      const map = {
        id: '编号',
        password: '密码',
        mobile: '手机号',
        username: '姓名',
        timeOfEntry: '入职日期',
        formOfEmployment: '聘用形式',
        correctionTime: '转正日期',
        workNumber: '工号',
        departmentName: '部门',
        staffPhoto: '头像地址'
      }
      this.tHeader = Object.values(map)
      // 返回的是一个二维数组即可
      // [[],[],[]]
      return list.map((item) => {
        // 获取这些对象并且是中文
        var obj = {}
        var enKey = Object.keys(map) // 英文键
        for (var key of enKey) {
          obj[key] = item[key] // {编号:123,密码:456}
        }
        // 上面处理的是obj对象中只有10个字段
        return Object.values(obj) // 获取所有obj对象中的value值 [123,456]
      })
    },
    // 分配角色
    roleHandle(row) {
      /*
      步骤：
      1-点击按钮
      2-显示对话框
      3-获取所有的角色列表
      4-获取用户当前所拥有的角色
      5-给用户添加角色 并获取角色值
      6-点击对话框确认按钮
        6-1 发送请求给用户分配角色
        6-2 关闭对话框
      */
      //  显示对话框
      this.dialogVisibleRole = true
      this.getInfo(row.id)
      this.userId = row.id // 获取的是用户id
    },
    closeHandleRole() {}
    // 获取用户信息 根据id
    // async getInfo(id) {
    //   const res = await getUserDetailById(id)
    //   console.log(`res`, res)
    //   this.userInfoById = res.data
    // }
  }
}
</script>
<style lang='scss'  scoped>
.employees-container {
  padding: 20px 30px;
}
</style>